<template>
  <div class="h-full flex flex-col p-2">
    <!-- 按键 -->
    <div class="flex justify-between rounded items-center bg-white p-2">
      <el-space>
        <el-button class="" type="primary" :icon="Back" @click="BackPage()"
          >返回</el-button
        >
        <!-- 选择 -->
        <el-select
          v-model="mSelectiveSet"
          style="width: 160px"
          filterable
          placeholder="请选择"
          @change="SelectionEvent()"
        >
          <el-option
            v-for="item in options"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-space>
    </div>
    <!-- 数据集列表 -->
    <div class="flex flex-col rounded">
      <el-row :gutter="10">
        <el-col :span="4" v-for="item in Data" :key="item">
          <div
            class="bg-white rounded mt-2 grid justify-center items-center cursor-pointer transition-all duration-300 hover:shadow-lg active:scale-95 hover:bg-gray-50"
            @click="handleItemClick(item)"
          >
            <img
              class="mt-2 transition-transform hover:scale-105"
              src="@/assets/icon_file.svg"
              style="width: 7.5rem; height: 7.5rem"
            />
            <h3 class="flex justify-center items-center">
              {{ item.folderName }}
            </h3>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
//
import { onMounted, reactive, ref } from "vue";
//
import { Back, Upload, Delete } from "@element-plus/icons-vue";
/**
 * 存储
 */
import storageService from "@/utils/dataStore_utils";
/**
 * 训练集
 */
import FileUploadApi from "@/api/modules/FileUploadApi";
/**
 *
 */
import { requestedMessage } from "@/utils/requested_utils";

/**
 * 选择集
 */
const mSelectiveSet = ref("train");

/**
 * 循环展示的数据
 */
const Data = ref([]);

/**
 * 验证集回数据
 */
const trainData = ref([]);

/**
 * 训练集 数据
 */
const valData = ref([]);

/**
 *
 */
const options = [
  {
    value: "train",
    label: "训练集",
  },
  {
    value: "val",
    label: "验证集",
  },
];

/**
 * 生命周期
 */
onMounted(() => {
  /**
   *
   */
  console.log("状态" + storageService.sessionData.TheDataSetid);
  /**
   *
   */
  getList();
});
/**
 * 返回
 */
function BackPage() {
  /**
   * 返回数据
   */
  window.$router.push("/data_manage");
}

/**
 * 选择事件
 */
function SelectionEvent() {
  if (mSelectiveSet.value === "train") {
    Data.value = trainData.value;
  } else {
    Data.value = valData.value;
  }
  console.log("触发" + mSelectiveSet.value);
}

/**
 *  获取训练集列表
 */
function getList() {
  requestedMessage(
    async () => {
      const { message, msg } = await FileUploadApi.getFolderInfo(
        storageService.sessionData.TheDataSetid
      );
      Data.value = message.train;
      trainData.value = message.train;
      valData.value = message.val;
      return msg;
    },
    {
      showSuccess: true,
      fullscreenLoading: true,
    }
  );
}

/**
 * 选中那个
 * @param item
 */
function handleItemClick(item) {
  console.log(item);
  storageService.saveToSessionStorage("PicturePath", item.folderPath);
  //
  window.$router.push("/data_picture");
}
</script>
